<template>
  <common-list>
    <common-table
      slot="content"
      v-loading="loading"
      :data="settingList"
      @selection-change="handleSelectionChange"
    >
      <el-table-column label="发送方式编码" align="left" prop="code" />
      <el-table-column label="发送方式名称" align="left" prop="name" />
      <el-table-column label="状态" align="center" prop="state" width="125px">
        <template slot-scope="scope">
          <el-tag size="mini" type="success" v-if="scope.row.state === 0"
            >启用
          </el-tag>
          <el-tag size="mini" type="danger" v-if="scope.row.state === 1"
            >停用
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="left" width="120px">
        <template slot-scope="scope">
          <el-button type="text" @click="getInfo(scope.row)">详情</el-button>
          <el-button type="text" @click="handleUpdate(scope.row)"
            >编辑
          </el-button>
          <el-button
            type="text"
            @click="handleShake(scope.row)"
            :disabled="scope.row.isDisabledForShake"
            >{{ scope.row.state === 0 ? "停用" : "启用" }}
          </el-button>
        </template>
      </el-table-column>
    </common-table>
    <pagination
      slot="pagination"
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <common-edit-dialog
      :title="title"
      :visible.sync="open"
      @cancel="cancel"
      @submit="submitForm"
      :button-loading="isPersistenceLoading"
    >
      <el-form
        ref="form"
        :model="form"
        :rules="rules"
        label-width="100px"
        @submit.native.prevent
      >
        <el-row :gutter="18">
          <el-col :span="12">
            <el-form-item label="发送方式编码" prop="code">
              <common-input
                disabled
                v-model="form.code"
                placeholder="请输入发送方式编码"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="发送方式名称" prop="name">
              <common-input
                disabled
                v-model="form.name"
                placeholder="请输入发送方式名称"
              />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="配置说明" prop="remark">
              <common-input
                v-model="form.remark"
                type="textarea"
                placeholder="请输入内容"
              />
            </el-form-item>
          </el-col>
          <!-- <el-form-item label="状态0启用1停用" prop="state">
          <common-input v-model="form.state" placeholder="请输入状态0启用1停用" />
        </el-form-item> -->
          <el-col :span="12">
            <el-form-item label="IP" prop="ip">
              <common-input
                :verify="false"
                v-model="form.ip"
                placeholder="请输入Ip地址"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="端口" prop="port">
              <common-input-number
                :max-length="5"
                v-model="form.port"
                placeholder="请输入端口"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="url地址" prop="url">
              <common-input
                :verify="false"
                v-model="form.url"
                placeholder="请输入内容"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="用户名" prop="username">
              <common-input
                :verify="false"
                v-model="form.username"
                placeholder="请输入用户名"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="密码" prop="password">
              <common-input
                :verify="false"
                v-model="form.password"
                type="password"
                placeholder="请输入密码"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="实例名" prop="instancename">
              <common-input
                v-model="form.instancename"
                placeholder="请输入实例名"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="扩展参数1" prop="field1">
              <common-input
                :verify="false"
                v-model="form.field1"
                type="textarea"
                placeholder="请输入内容"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="扩展参数2" prop="field2">
              <common-input
                :verify="false"
                v-model="form.field2"
                type="textarea"
                placeholder="请输入内容"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="扩展参数3" prop="field3">
              <common-input
                :verify="false"
                v-model="form.field3"
                type="textarea"
                placeholder="请输入内容"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="扩展参数4" prop="field4">
              <common-input
                :verify="false"
                v-model="form.field4"
                type="textarea"
                placeholder="请输入内容"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="扩展参数5" prop="field5">
              <common-input
                :verify="false"
                v-model="form.field5"
                type="textarea"
                placeholder="请输入内容"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="扩展参数6" prop="field6">
              <common-input
                :verify="false"
                v-model="form.field6"
                type="textarea"
                placeholder="请输入内容"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="扩展参数7" prop="field7">
              <common-input
                :verify="false"
                v-model="form.field7"
                type="textarea"
                placeholder="请输入内容"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="扩展参数8" prop="field8">
              <common-input
                :verify="false"
                v-model="form.field8"
                type="textarea"
                placeholder="请输入内容"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="扩展参数9" prop="field9">
              <common-input
                :verify="false"
                v-model="form.field9"
                type="textarea"
                placeholder="请输入内容"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="扩展参数10" prop="field10">
              <common-input
                :verify="false"
                v-model="form.field10"
                type="textarea"
                placeholder="请输入内容"
              />
            </el-form-item>
          </el-col>

          <!-- <el-form-item label="创建人" prop="createUserCode">
          <common-input v-model="form.createUserCode" type="textarea" placeholder="请输入内容" />
        </el-form-item>
        <el-form-item label="扩展字段json" prop="customizeParam">
          <common-input v-model="form.customizeParam" type="textarea" placeholder="请输入内容" />
        </el-form-item>
        <el-form-item label="json格式值" prop="customizeParamValue">
          <common-input v-model="form.customizeParamValue" type="textarea" placeholder="请输入内容" />
        </el-form-item> -->
        </el-row>
      </el-form>
      <el-button slot="footer-button" @click="testMsgMessage"
        >短信测试
      </el-button>
    </common-edit-dialog>
    <common-info-dialog
      :visible.sync="openInfo"
      :title="detailsTitle"
      :infoLoading="infoLoading"
      @cancel="cancelInfo"
    >
      <common-info-table>
        <common-info-table-cell label="发送方式编码">{{
          form.code
        }}</common-info-table-cell>
        <common-info-table-cell label="发送方式名称">{{
          form.name
        }}</common-info-table-cell>
        <common-info-table-cell label="状态">{{
          form.state === 0 ? "启用" : "停用"
        }}</common-info-table-cell>
      </common-info-table>
    </common-info-dialog>
  </common-list>
</template>

<script>
import {
  listSetting,
  getSetting,
  updateSetting,
  testSendSmsMessage,
  setMsgStatus,
} from "@/api/system/msgsetting";
import { encode } from "@/utils/aesUtils";
import { deepClone } from "../../../utils";
import BaseList from "@/mixins/BaseList";

export default {
  name: "Setting",
  mixins: [BaseList],
  components: {},
  data() {
    return {
      openInfo: false, //详情弹框
      detailsTitle: "", //详情标题
      isPersistenceLoading: false,
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示查询条件
      showSearch: true,
      // 总条数
      total: 0,
      // 【请填写功能名称】表格数据
      settingList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {},
      infoLoading: false,
    };
  },
  created() {
    this.getList();
  },
  methods: {
    //详情取消按钮
    cancelInfo() {
      this.openInfo = false;
    },
    //获取详情信息
    getInfo(id) {
      this.detailsTitle = "短信配置详情";
      this.openInfo = true;
      this.infoLoading = true;
      this.getSetting(id);
    },
    getSetting(id) {
      getSetting(id).then((res) => {
        // console.log(res);
        if (res.data.dataList.length !== 0) {
          this.form.code = res.data.dataList[0].code;
          this.form.name = res.data.dataList[0].name;
          this.form.state = res.data.dataList[0].state;
          this.infoLoading = false;
        } else {
          this.$GlobalErrorConfirm("获取信息失败", res.msg, "重新加载").then(
            () => {
              this.getSetting(id);
            }
          );
        }
      });
    },
    /** 查询【请填写功能名称】列表 */
    getList() {
      this.loading = true;
      listSetting(this.queryParams)
        .then((res) => {
          if (res && (res.rescode === 200 || res.code === 200)) {
            this.settingList = res.data.dataList.reduce((r, c) => {
              r.push({
                ...c,
                isDisabledForShake: false,
              });
              return r;
            }, []);
            this.total = res.data.totalCount;
          } else {
            this.settingList = [];
            this.total = 0;
            this.handleListTips(res);
          }
        })
        .finally(() => {
          this.loading = false;
        });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        smsSettingId: null,
        code: null,
        name: null,
        state: null,
        ip: null,
        port: null,
        url: null,
        username: null,
        password: null,
        instancename: null,
        field1: null,
        field2: null,
        field3: null,
        field4: null,
        field5: null,
        field6: null,
        field7: null,
        field8: null,
        field9: null,
        field10: null,
        remark: null,
        createUserCode: null,
        createTime: null,
        customizeParam: null,
        customizeParamValue: null,
      };
      this.resetForm("form");
    },
    /** 查询按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.queryParams = this.$options.data().queryParams;
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.smsSettingId);
      this.single = selection.length !== 1;
      this.multiple = !selection.length;
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "新增";
    },
    /** 编辑按钮操作 */
    handleUpdate(row) {
      if (row.state === 0)
        return this.$GlobalErrorConfirm("编辑失败", "启用状态下不允许编辑");
      this.reset();
      const id = row.id || this.ids;
      getSetting({ id }).then((response) => {
        if (response && (response.rescode === 200 || response.code === 200)) {
          this.form = response.data.dataList[0];
          this.open = true;
          this.title = "编辑短信配置";
        }
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.form.id != null) {
            if (!this.isPersistenceLoading) {
              this.isPersistenceLoading = true;
              updateSetting(this.form)
                .then((response) => {
                  if (
                    response &&
                    (response.code === 200 || response.rescode === 200)
                  ) {
                    this.$GlobalSuccessMessage("编辑成功");
                    this.open = false;
                    this.getList();
                  } else {
                    this.$GlobalErrorConfirm("编辑失败", response.msg);
                  }
                })
                .finally(() => {
                  this.isPersistenceLoading = false;
                });
            }
          }
        }
      });
    },
    testMsgMessage() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.form.id != null) {
            let params = deepClone(this.form);
            params.field9 = encode(this.form.field9);
            testSendSmsMessage(params).then((response) => {
              if (
                response &&
                (response.code === 200 || response.rescode === 200)
              ) {
                this.$GlobalSuccessMessage("测试成功");
              } else {
                this.$GlobalErrorConfirm("测试失败", response.msg);
              }
            });
          }
        }
      });
    },
    changeStatus(row) {
      return new Promise((resolve, reject) => {
        const params = {
          id: row.id,
          state: row.state === 0 ? 1 : 0,
        };
        if (params.state === 1) {
          // 启用状态
          this.$GlobalDeleteConfirm(
            "停止后将影响二次登录，告警处理及时性，请确认是否停用"
          )
            .then(() => {
              setMsgStatus(params).then((response) => {
                if (
                  response &&
                  (response.code === 200 || response.rescode === 200)
                ) {
                  this.$GlobalSuccessMessage("操作成功");
                  this.getList();
                  resolve(response);
                } else {
                  reject();
                  this.$GlobalErrorConfirm("操作失败", response.msg);
                }
              });
            })
            .catch(() => reject());
        } else {
          //停用状态
          setMsgStatus(params)
            .then((response) => {
              if (
                response &&
                (response.code === 200 || response.rescode === 200)
              ) {
                this.$GlobalSuccessMessage("操作成功");
                this.getList();
                resolve(response);
              } else {
                reject();
                this.$GlobalErrorConfirm("操作失败", response.msg);
              }
            })
            .catch(() => reject());
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped></style>
